import React, { useState, useEffect } from 'react';
import { Button, message, Steps, theme, Form, Select, Input, DatePicker, Table, Result } from 'antd';
import { useNavigate } from 'react-router-dom'
import type { DatePickerProps } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as user from '../../../api/user'
import { textSpanEnd } from 'typescript';
function Payoff(props: any) {
    interface DataType {
        key: string;
        name: string
        department: string;
        post: string;
        ipnone: string;
        number: string;
        idcard: string;
        payable: string;
        actual: string;
        id: string;
    }

    var [form] = Form.useForm()
    // 第一步
    let onone = () => {
        return (
            <div style={{ textAlign: 'center', height: '650px' }}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 400, margin: '20px auto' }}
                    // initialValues={{ remember: true }}
                    autoComplete="off"
                >
                    <Form.Item
                        label="薪资方案"
                        name="1"
                        rules={[{ required: true, message: '请输入原密码' }]}
                    >
                        <Select
                            style={{ width: 266 }}
                            options={[
                                { value: '0', label: '工资单模板一' },
                                { value: '1', label: '工资单模板二' },
                                { value: '2', label: '工资单模板三' },
                                { value: '3', label: '工资单模板四' },
                                { value: '4', label: '工资单模板五' },
                                { value: '5', label: '工资单模板六' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item
                        label="计薪周期"
                        name="2"

                        rules={[{ required: true, message: '' }]}
                    >
                        <Input
                            style={{ border: 'none' }}
                            defaultValue='2023-02-01至2023-02-31' />
                    </Form.Item>
                    <Form.Item
                        label="发放月份"
                        name="3"
                        rules={[{ required: true, message: '' }]}
                    >
                        <DatePicker
                            style={{ width: 266 }}
                            placeholder=''
                            onChange={onTime} />
                    </Form.Item>
                    <Form.Item
                        label="工资单名称"
                        name="4"
                        rules={[{ required: true, message: '' }]}
                    >
                        <Input />
                    </Form.Item>
                </Form>
            </div>

        )
    }
    // 时间定义
    const onTime: DatePickerProps['onChange'] = (date, dateString) => {
        // console.log(date, dateString);
    };
    // 表格列表
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            key: 'num',
            render: (_, record) => <span>{tableData.indexOf(record) + 1}</span>
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '部门',
            dataIndex: 'department',
            key: 'department',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '岗位',
            dataIndex: 'post',
            key: 'post',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '手机号',
            dataIndex: 'iphone',
            key: 'iphone',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '工号',
            dataIndex: 'number',
            key: 'number',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '证件号',
            dataIndex: 'idcard',
            key: 'idcard',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '应发工资',
            dataIndex: 'payable',
            key: 'payable',
            render: (text) => <span>{text}</span>,
        },
        {
            title: '实发工资',
            dataIndex: 'actual',
            key: 'actual',
            render: (text) => <span>{text}</span>,
        }
    ]
    // 创建列表渲染数据
    const [tableData, setTableData] = useState<DataType[]>([])
    // 用户列表
    let userlist = async () => {
        var res = await user.system_list()
        console.log(res)
        setTableData(res.data.data)
    }
    useEffect(() => {
        userlist();
    }, [])
    // 第二步
    let ontwo = () => {
        return (
            <Table columns={columns} dataSource={tableData} rowKey={"id"} />
        )
    }
    // 第三步
    let onthree = () => {
        return (
            <div style={{ height: '650px' }}>
                <Result
                    status="success"
                    title="已成功支付!"
                />
            </div>
        )
    }
    const steps = [
        {
            title: '新建发放工资单',
            content: onone(),
        },
        {
            title: '发放工资单',
            content: ontwo(),
        },
        {
            title: '支付结果',
            content: onthree(),
        },
    ];
    // 路由
    const Navigate = useNavigate()
    const { token } = theme.useToken();
    const [current, setCurrent] = useState(0);
    // 下一步
    const next = () => {
        setCurrent(current + 1);
    };
    // 上一步
    const prev = () => {
        setCurrent(current - 1);
    };
    // 遍历步骤名
    const items = steps.map((item) => ({ key: item.title, title: item.title }));
    // 信息框样式
    const contentStyle: React.CSSProperties = {
        textAlign: 'center',
        color: token.colorTextTertiary,
        margin: ' 0 20px',
    };

    return (
        <div>
            <Steps size='small' current={current} items={items} />
            <div style={contentStyle}>{steps[current].content}</div>
            <div style={{ marginTop: 24 }}>
                {current < steps.length - 1 && (
                    <Button type="primary" onClick={() => next()}>
                        下一步
                    </Button>
                )}
                {current === steps.length - 1 && (
                    <Button type="primary" onClick={() => message.success('已支付!')}>
                        下一步
                    </Button>
                )}
                {current > 0 && (
                    <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                        上一步
                    </Button>
                )}
            </div>

        </div>
    );
}

export default Payoff;